import React, { useMemo, useRef } from "react";
import { Space, Badge } from "antd";
import { useRequest } from "ahooks";

import { helper } from "vendor/utils/T";
import ProBox from "vendor/components/pro-box";
import ProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { useThemeToken, getEnv } from "@/constants";

import { getDataAction, getCreateOrEdit, getFilterItems } from './proTableDriver';
import { RespDataType, getAgentSelectList } from '../api';
import { InitAdminBtn } from "./btns";

const List: React.FC = () => {
  const { themeToken } = useThemeToken();
  const proTableRef = useRef<IProTableRef>();
  const { data: agentList = [], loading } = useRequest(() => getAgentSelectList().then(resp => resp.data))
  const columns = useMemo(() => getColumns(agentList), [agentList]);
  // console.log("agentList->", agentList);

  return <ProBox loading={loading}>
    <ProTable
      ref={proTableRef}
      dataAction={getDataAction(proTableRef)}
      rowKey={"id"}
      theme={themeToken.proTableToken}
      headerProps={{
        operatorProps: {
          btnList: [
            { innerType: "create" },
            { innerType: "edit" },
            { innerType: "delete" }
          ],
          createOrEditProps: {
            modalProps: {
              width: "40%"
            },
            CreateOrEditContent: getCreateOrEdit(agentList),
            getModalTitle: (rowKey) => rowKey ? "编辑账户" : "创建账户",
          },
        },
        filterProps: {
          maxWidth: "60%",
          filterItems: getFilterItems(agentList)
        }
      }}
      contentProps={{
        tableProps: {
          columns,
        }
      }}
      onError={(msg) => console.error(msg)}
    />
  </ProBox>
}

export default List;

const getColumns = (agentList: RespDataType.AgentSelectList) => {
  const { commonStatusList } = getEnv().globalConfig;
  const agentToInfo = helper.convertArrayToObj(agentList);
  const statusToInfo = helper.convertArrayToObj(commonStatusList);

  const columns: TableType.ColumnsType<RespDataType.AccountItem> = [
    {
      title: '公司名称',
      dataIndex: 'name',
    },
    {
      title: '代理商',
      dataIndex: 'agentId',
      render: (value) => {
        const { label } = agentToInfo[value];
        return label
      }
    },
    {
      title: '联系人',
      dataIndex: 'linkman',
      render: (value) => value || "-",
    },
    {
      title: '联系人电话',
      dataIndex: 'linkmanPhone',
      render: (value) => value || "-",
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (value) => {
        const { label, color } = statusToInfo[value];
        return <Badge text={label} color={color} />
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
    },
    {
      title: "操作",
      render: (_, record) => <Space>
        <InitAdminBtn accountId={record.id} />
        {/* <AuthSecretKeyBtn accountId={record.id} />
        <AuthReportBtn accountId={record.id} /> */}
      </Space>
    }
  ];

  return columns;
}
